<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>鸿发水果 - 登录页面</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<link href="/webapp/css/bootstrap.min.css" rel="stylesheet">
<link href="/webapp/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/webapp/css/style.min.css" rel="stylesheet">
<style>
 body{
   width: 98vh;
   height: 98vh;	/* 重点一 */
   margin: 0 auto;
   background-image: url('/webapp/images/Face.jpg');
   background-repeat: no-repeat;
   background-size: cover; /* 重点二 */
   overflow: auto;
 }

.lyear-wrapper {
    position: relative;
}
.lyear-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.login-center {
    background: #fff;
    min-width: 38.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em 0;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {

    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;

}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
</style>
</head>
<body>
<div class="row lyear-wrapper">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
        <a href="/login"> <img alt="light year admin" src="/webapp/images/logo.jpg"> </a>
      </div>
      <form action="" method="post" id="signupForm">
        <div class="form-group has-feedback feedback-left">
          <input type="text" placeholder="账户/邮箱/手机号码" class="form-control" name="userValue" id="userValue" />
          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input type="password" placeholder="请输入密码" class="form-control" id="userPwd" name="userPwd" />
          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group">
          <button id="submit" class="btn btn-block btn-primary" type="button" >立即登录</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript" src="/webapp/js/jquery.min.js" ></script>
<script src="/webapp/js/plugins/layer/layer.js"></script>
<script>

  $("body").keydown(function () {

    if (window.event.keyCode==13) {
      //如果发生了按下回车键事件，回车键对应的编号是13

      $("#submit").trigger("click"); //则激活登录按钮的click事件
    }
  });

    $("#submit").click(function () {
      $(this).attr("disabled","disabled");
      var layerload = layer.load(1, {
        shade: [0.1,'#fff'] //0.1透明度的白色背景
      });
      var userValue = $("#userValue").val();
      var userpwd = $("#userPwd").val();
      if(userValue == null || userValue == "" || userpwd==null || userpwd == ""){
        layer.close(layerload);
        layer.msg('账户或密码不能为空！');
      }else{
        $.ajax({
          cache: true,
          type:'Post',
          url:'/myLogin',
          datatype: "json",
          async: false,
          data : $('#signupForm').serialize(),// 你的formid
          success: function (data) {
         // console.log(data);
           if(data.status == "200"){
             layer.close(layerload);
               layer.msg(data.msg);
               location.href = '/index';
           }else if(data.status != "" && data.status != null){
             layer.close(layerload);
               layer.msg(data.msg);
           }else{
             layer.close(layerload);
               layer.msg('登录异常,请联系管理员！');
           }
          },
          error:function (data) {
            layer.close(layerload);
            layer.msg('登录失败，请检查账号或密码！');
          }
        });
      }
    setTimeout(function () {
      $("#submit").removeAttr("disabled");
    },3000)
    });

</script>

</body>
</html>